<!DOCTYPE html>
<html>
<head>
    <title>Excel多Sheet转JSON</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
    <style>
        body { font-family: Arial, sans-serif; margin: 2rem; }
        .container { max-width: 1000px; margin: 0 auto; }
        .upload-box { border: 2px dashed #ccc; padding: 2rem; text-align: center; margin: 1rem 0; }
        #sheetList { margin: 1rem 0; }
        .sheet-item { 
            padding: 0.5rem; 
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        pre { 
            background: #f5f5f5;
            padding: 1rem;
            max-height: 400px;
            overflow: auto;
        }
        button {
            background: #4CAF50;
            color: white;
            padding: 0.5rem 1rem;
            border: none;
            cursor: pointer;
            margin: 0.2rem;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>Excel多Sheet转换工具</h2>
        
        <div class="upload-box">
            <p>拖放Excel文件或 <button onclick="document.getElementById('fileInput').click()">选择文件</button></p>
            <input type="file" id="fileInput" accept=".xlsx, .xls" hidden />
        </div>

        <div id="sheetList"></div>
        <pre id="preview"></pre>
    </div>

    <script>
        let workbookData = null;

        // 文件处理
        document.getElementById('fileInput').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) processFile(file);
        });

        // 拖拽处理
        document.addEventListener('dragover', e => e.preventDefault());
        document.addEventListener('drop', e => {
            e.preventDefault();
            const file = e.dataTransfer.files[0];
            if (file && (file.name.endsWith('.xlsx') || file.name.endsWith('.xls'))) {
                processFile(file);
            }
        });

        // 核心处理函数
        async function processFile(file) {
            const data = await file.arrayBuffer();
            const workbook = XLSX.read(data, {type: 'array'});
            
            workbookData = {};
            workbook.SheetNames.forEach(sheetName => {
                const worksheet = workbook.Sheets[sheetName];
                const rawData = XLSX.utils.sheet_to_json(worksheet, { header: 1, rawNumbers: true });
                
                // 处理表头和数据
                const [headers, ...rows] = rawData;
                workbookData[sheetName] = rows.map(row => 
                    headers.reduce((obj, key, idx) => {
                        obj[key] = row[idx] ?? null;
                        return obj;
                    }, {})
                );
            });

            updateUI(workbook.SheetNames);
        }

        // 界面更新
        function updateUI(sheetNames) {
            const listDiv = document.getElementById('sheetList');
            listDiv.innerHTML = sheetNames.map(name => `
                <div class="sheet-item">
                    <span>📄 ${name} (${workbookData[name].length} 条数据)</span>
                    <div>
                        <button onclick="previewSheet('${name}')">预览</button>
                        <button onclick="downloadSheet('${name}')">下载</button>
                    </div>
                </div>
            `).join('');

            previewSheet(sheetNames[0]);
        }

        // 预览功能
        function previewSheet(sheetName) {
            const jsonStr = JSON.stringify(workbookData[sheetName], null, 2);
            document.getElementById('preview').textContent = jsonStr;
        }

        // 下载功能
        function downloadSheet(sheetName) {
            const data = workbookData[sheetName];
            const blob = new Blob([JSON.stringify(data)], {type: 'application/json'});
            const url = URL.createObjectURL(blob);
            
            const fileName = `${sanitizeFileName(sheetName)}.json`;
            const a = document.createElement('a');
            a.href = url;
            a.download = fileName;
            a.click();
            
            URL.revokeObjectURL(url);
        }

        // 文件名消毒
        function sanitizeFileName(name) {
            return name.replace(/[\\/:*?"<>|]/g, '_').replace(/\s+/g, '_');
        }
    </script>
</body>
</html>